<template>
  <div>
    <el-header height="64px" id="nav">
      <div class="p-0">
        <div class="navbar navbar-expand-lg">
          <div class="navbar-brand" style="font-size: 0px" href="/">
            <img :src="icon" height="40" />
          </div>

          <el-button type="primary" size="large" class="navbar-toggler" link @click="
            collapse.display === 'block'
              ? (collapse.display = 'none')
              : (collapse.display = 'block')
            ">
            <el-icon size="large">
              <Menu v-if="!collapse.display || collapse.display === 'none'" />
              <CloseBold v-else />
            </el-icon>
          </el-button>

          <div class="collapse navbar-collapse" :style="{
            width: collapse.display === 'block' ? '200px' : '0',
            ...collapse,
          }" id="navbarSupportedContent">
            <ul class="navbar-nav" :style="{ margin: '0 auto' }">
              <router-link :to="routers.activity" custom v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <el-icon>
                    <Flag />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;比赛</span>
                </li>
              </router-link>
              <router-link :to="routers.teamfile" custom v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <el-icon>
                    <Flag />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;团队文件</span>
                </li>
              </router-link>
            </ul>
            <div class="navbar-nav mr-auto">
              <!-- 个人中心 -->
              <div class="nav-item">
                <el-dropdown @command="handleCommand" trigger="hover">
                  <div class="avater-h nav-item-title">
                    <el-avatar :src="circleUrl" style="transform: translateY(7px)" size="default"></el-avatar>
                    <span class="avater-name hov" v-text="myName"></span>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- <el-dropdown-item command="u">个人中心</el-dropdown-item>
                      <el-dropdown-item command="a">管理我的题目</el-dropdown-item> -->
                      <el-dropdown-item class="tmp111" command="d" divided>修改个人信息</el-dropdown-item>
                      <el-dropdown-item command="b">退出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <!-- 团队 -->
              <div class="nav-item">
                <el-dropdown trigger="hover" :hide-on-click="false" ref="dropShow"
                  @visible-change="handleDropdownVisibleChange" :max-height="400">
                  <div class="hov nav-item" style="padding: 0">
                    <i class="iconfont">&#xe600;</i>
                    <span class="avater-name hov">团队</span>
                    <el-text class="hov" style="
                        text-align: left;
                        width: 100px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      " truncated>:{{ myteam.name || "暂未选择团队" }}</el-text>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-if="isAdmin">
                        <el-text type="" size="default" class="goToMgmt cu" v-if="isAdmin" @click="goToMgmt">
                          <!-- <el-icon class="icon-text">
                                <Management />
                              </el-icon> -->
                          当前团队管理后台
                        </el-text>
                        <div v-if="isAdmin" class="position-absolute" :style="{ right: '12px' }">
                          <i class="icon icon-ic_fluent_arrow_circle_right_24_filled"
                            :style="{ color: 'var(--color-cheng)' }"></i>
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item divided>
                        <el-input v-model="searchQuery" placeholder="请输入团队名称" @input="filterTeams" clearable
                          @focus="onFocus" @blur="onBlur" @compositionstart="onCompositionStart"
                          @compositionend="onCompositionEnd"></el-input>
                      </el-dropdown-item>
                      <el-dropdown-item divided v-for="(v, k) in filteredTeams" :key="'team_' + k"
                        class="position-relative" :command="k">
                        <!-- size="default" -->
                        <el-text v-if="v.ID === myteam.ID" type="primary">{{
                          v.name
                          }}</el-text>
                        <span v-else @click="changeTeam(v.ID)">{{
                          v.name
                          }}</span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-header>
    <el-dialog v-model="dialogVisible" class="" width="550px">
      <template #header>
        <span class="icon-text el-dialog__header-title">
          <el-icon class="text-primary">
            <Guide />
          </el-icon>
          {{ name }}
        </span>
      </template>
      <div class="row justify-content-md-center text-login">
        <div class="col">
          <!-- <h4 v-text="name" :class="name == '登录' ? 'text-center' : ''"></h4> -->
        </div>
      </div>
      <div id="navel-dialog" class="row justify-content-md-center text-body">
        <div class="col" v-show="name == '登录'">
          <el-form ref="formref" :model="form" label-width="95px" size="default" label-position="left">
            <el-form-item class="text-item text-center" label-width="0">
              <img style="transform: translateX(10px)" width="80" class="headimage"
                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
            </el-form-item>
            <el-form-item label="团队ID">
              <el-input placeholder="团队ID" name="teamid" v-model="form.teamid"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="账号/手机号">
              <el-input placeholder="账号/手机号" name="phonenum" v-model="form.phonenum"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="密码" name="password" type="password" v-model="form.password"></el-input>
            </el-form-item>
            <div class="text-right pu" @click="name = '忘记密码'">
              找回/修改密码
            </div>
            <el-form-item label-width="0">
              <div class="row m-0 p-0">
                <div class="col">
                  <button class="btn d-block btn-login" type="button" @click="login">
                    登录
                  </button>
                </div>
                <div class="col">
                  <button class="btn d-block btn-login" type="button" @click="name = '注册'">
                    用户注册
                  </button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="col" v-show="name == '忘记密码'">
          <el-form ref="forgetref" :model="forget" label-width="95px" size="default" label-position="left">
            <el-form-item class="text-item text-center" label-width="0">
              <img style="transform: translateX(10px)" width="80" class="headimage"
                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
            </el-form-item>
            <el-form-item class="text-item" label="手机号：" prop="phonenum">
              <el-input placeholder="请输入手机号" name="phonenum" v-model="forget.phonenum"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="验证码：" prop="yzm">
              <div class="row m-0">
                <div class="col p-0">
                  <el-input placeholder="四位验证码" v-model="forget.yzm"></el-input>
                </div>
                <div class="col pr-0">
                  <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                    @click.stop.prevent="forgetSendCode" :disabled="time2 !== 60"
                    v-text="time2 == 60 ? '验证码' : time2"></button>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="text-item" label="新密码：" prop="password">
              <el-input placeholder="请输入新密码" name="newpassword" type="password" v-model="forget.password"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label-width="0">
              <div class="row m-0 p-0">
                <div class="col p-0 text-right">
                  <button class="btn btn-login d-block" type="button" @click="forgetpassword">
                    修改密码
                  </button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <el-dialog width="" class="el-dialog-z-1" v-model="innerVisible">
          <template #header>
            <span class="icon-text el-dialog__header-title">
              <el-icon class="text-primary">
                <Guide />
              </el-icon>
              选择头像
            </span>
          </template>
          <div>
            <img :src="im" class="headimage" @click="
              register.headportrait = im;
            userInfoForm.headportrait = im;
            innerVisible = false;
            " v-for="im in headimage" :key="im" />
          </div>
        </el-dialog>

        <div class="col" v-show="name == '注册'">
          <el-form ref="registerref" :rules="registerrole" :model="register" label-width="95px" size="default"
            label-position="left">
            <el-form-item class="text-item cu" @click="innerVisible = true" label-width="0">
              <img :src="register.headportrait" class="headimage" width="80" />
              &nbsp;&nbsp;&nbsp;点击图片修改头像
            </el-form-item>
            <el-form-item class="text-item" label="手机号：" prop="phonenum">
              <el-input placeholder="请输入手机号" name="phonenum" v-model="register.phonenum"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="验证码：" prop="yzm">
              <div class="row m-0">
                <div class="col p-0">
                  <el-input placeholder="请输入验证码" v-model="register.yzm"></el-input>
                </div>
                <div class="col pr-0">
                  <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                    @click.stop.prevent="registerSendCode" :disabled="time !== 60"
                    v-text="time == 60 ? '验证码' : time"></button>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="text-item" label="密码：" prop="password">
              <el-input type="password" name="password" placeholder="请输入密码" v-model="register.password"></el-input>
            </el-form-item>

            <el-form-item class="text-item">
              <el-input placeholder="请输入用户名" aria-label="用户名：" name="name" v-model="register.name"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label-width="0">
              <div class="row m-0 p-0">
                <div class="col p-0">
                  <button class="btn btn-login d-block" type="button" @click="registersubmit">
                    注册
                  </button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="col" :style="{ marginTop: '0px' }" v-show="name == '修改个人信息'">
          <el-form class="fix-form" ref="registerref" :model="userInfoForm" label-width="80px" size="default"
            label-position="left">
            <div class="form-item-title">个人信息</div>
            <el-form-item class="text-item cu" @click="innerVisible = true" label-width="0">
              <div class="icon-text">
                <el-avatar :src="userInfoForm.headportrait
                    ? userInfoForm.headportrait
                    : getuser
                      ? getuser.headportrait
                      : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg'
                  " class="headimage" :style="{
                    width: '56px',
                    height: '56px',
                    marginRight: '24px',
                  }" width="56"></el-avatar>
                <span>点击修改个人头像</span>
              </div>
            </el-form-item>
            <el-form-item class="text-item" label="用户名：" prop="name">
              <el-input size="default" type="text" placeholder="请输入用户名" v-model.trim="userInfoForm.name"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label-width="0">
              <el-button class="fix-info-button" type="primary" size="default" @click="changeUser">
                修改个人信息
              </el-button>
            </el-form-item>
            <div class="form-item-title">修改密码</div>
            <el-form-item class="text-item" label="原密码：" prop="password">
              <el-input size="default" type="password" show-password name="password" placeholder="请输入原始密码"
                v-model="userInfoForm.password">
              </el-input>
            </el-form-item>
            <el-form-item class="text-item" label="新密码：" prop="password1">
              <el-input size="default" type="password" show-password name="password" placeholder="请输入新密码"
                v-model="userInfoForm.password1">
              </el-input>
            </el-form-item>
            <!-- <el-form-item class="text-item" prop="phonenum" label="手机号：">
              <el-input size="default" placeholder="请输入手机号" name="phonenum" v-model="userInfoForm.phonenum"></el-input>
            </el-form-item> -->
            <el-form-item class="text-item" label-width="0">
              <el-button class="fix-info-button" type="primary" size="default" @click="changepassword">
                修改密码
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { CloseBold, Menu } from "@element-plus/icons-vue";
import { ElDropdown, ElForm, ElMessage, ElMessageBox } from "element-plus";
import { computed, inject, onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  asyncChangeonlineteamid,
  asyncchangepassword,
  asyncchangeuser,
  asynccreateteam,
  asyncgetregistphoneVerificationCode,
  asynclogin,
  asynclogout,
  asyncresetpassword,
  asyncuserregist,
  selecteamtteams,
  selectteamrole,
} from "../api";
import { Storekey } from "../interface";
import Studycodemodel from "../mysql_interface/studycodemodel";
import headimage from "../ojSass/data/headimage";
import * as routers from "../ojSass/data/router";
import { isPhonenum } from "../util/RegExp";
const dialogVisible = ref(false);
const dialogVisibleteam = ref(false);
const collapse = reactive<Record<string, any>>({});
const time = ref(60);
const time2 = ref(60);
const props = defineProps<{
  icon: string;
  myteam: Studycodemodel.Iteam;
  update?: boolean;
  href?: string;
}>();

// 码客行
const tenant_id = inject<string | undefined>('tenant_id', undefined);

const dropdownref = ref();

const userInfoForm = reactive({
  name: "",
  password: "",
  password2: "",
  password1: "",
  headportrait: "",
  phonenum: "",
});
const form = reactive({
  teamid: "",
  password: "",
  phonenum: "",
});
const register = reactive({
  phonenum: "",
  password: "",
  yzm: "",
  headportrait: headimage[9],
  name: "",
});
const forget = reactive({
  phonenum: "",
  password: "",
  yzm: "",
});
const teamForm = reactive<Record<string, any>>({
  userid: 0,
  username: "",
  type: "申请",
  context: "",
});
const name = ref("登录");

const registerrole = {
  phonenum: [
    {
      message: "手机号不合法",
      regexp: isPhonenum,
      trigger: "blur",
    },
  ],
  password: [
    {
      min: 4,
      max: 25,
      message: "长度在 3 到 25 个字符",
      trigger: "blur",
    },
  ],
  yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};
const innerVisible = ref(false);

const router = useRouter();
const store = useStore(Storekey);
const getuser = computed(() => {
  return store.state.user;
});
const teamid = computed(() => {
  return getuser.value?.teamid;
});
const getteam = computed(() => {
  return store.state.team?.rows || [];
});
const isAdmin = computed(() => {
  return getuser.value?.isAdmin;
});
const myName = computed(() => {
  if ((getuser?.value?.name?.length || 0) > 5) {
    return getuser?.value?.name?.substring(0, 5) + "...";
  }
  return getuser?.value?.name;
});
const circleUrl = computed(() => {
  if (getuser.value) return getuser.value.headportrait;
  return "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
});

// 登录管理后台
function goToMgmt() {
  const { origin } = window.location;
  window.open(`${origin}/acCoderSaasMgmt`);
}
// isHGKJteam

// 获取权限
const roleName = "学生";
const routerNames = ref<any[]>([]);
async function getPermissionsCfg() {
  const { rows } = await selectteamrole({
    teamid: getuser.value?.teamid,
    name: roleName,
  });
  // 可能存在多条
  routerNames.value = rows[0]?.routername || [];
}
async function init() {
  // user 没有值的时候不需要处理
  if (!getuser.value) return;
  await getTeamList();
  const _myteam = localStorage.getItem("my-team");
  const myTeam = _myteam ? JSON.parse(_myteam) : {};
  const firstTeamId = teamList.value[0]?.ID;
  let changeId = firstTeamId;
  // myTeam.ID 有值 或者与firstTeamId 相等  则不需要修改否则默认第一个
  if (
    !myTeam.ID ||
    myTeam.ID === firstTeamId ||
    !teamList.value.find((e) => e.ID === myTeam.ID)
  ) {
    changeId = firstTeamId;
  } else {
    changeId = myTeam.ID;
  }
  if (changeId) {
    changeTeam(changeId);
  }
}

onMounted(async () => {
  init();
});

// 团队列表
// 用于搜索的输入框值
const searchQuery = ref();
const teamList = ref<Studycodemodel.Iteam[]>([]);
// 用于存储筛选后的团队数据
const filteredTeams = ref<Studycodemodel.Iteam[]>([]);
async function getTeamList() {
  // 销售助教特殊处理 刷新之后store就清空了
  // TODO  /v1/user/selectteams 在online之前调用了

  const { rows } = await selecteamtteams({ tenant_id });
  teamList.value = rows;
  filteredTeams.value = teamList.value;
}
async function changeTeam(id: number | undefined) {
  try {
    // 通知服务器修改 changeonlineteamid
    await asyncChangeonlineteamid({ teamid: id });
    // 修改store中user 的teamid改变
    store.dispatch("actiononline");
    setTimeout(() => {
      if (dropShow.value) {
        dropShow.value.handleClose();
      } else {
        console.log("dropShow is not a valid instance");
      }
    }, 200);
  } catch (error) {
    console.error("asyncChangeonlineteamid error=>", error);
  }
}
// 根据输入框内容进行筛选
function filterTeams() {
  if (searchQuery.value) {
    filteredTeams.value = teamList.value.filter((team) =>
      team?.name?.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  } else {
    filteredTeams.value = teamList.value;
  }
}
// 获取dropdown的引用  提取出 ElDropdown 类实例的类型
const dropShow = ref<InstanceType<typeof ElDropdown>>();
// 中文输入状态
let isComposing = false;
// 监听 dropdown 的显示/隐藏
function handleDropdownVisibleChange(visible: boolean) {
  if (!visible) {
    searchQuery.value = "";
  } else {
    // 将当前的团队排列在 filteredTeams 第一个
    const currentTeam = teamList.value.find((team) => team.ID === teamid.value);
    if (currentTeam) {
      filteredTeams.value = [
        currentTeam,
        ...teamList.value.filter((team) => team.ID !== teamid.value),
      ];
    }
  }
}
// 处理中文输入开始时的事件
function onCompositionStart() {
  isComposing = true;
}
// 处理中文输入结束时的事件
function onCompositionEnd() {
  // isComposing = true;
}
// 输入框聚焦时
function onFocus() {
  if (dropShow.value) {
    dropShow.value.handleOpen();
  }
}
// 处理失去焦点时的逻辑
function onBlur() {
  if (!isComposing) {
    if (dropShow.value) {
      dropShow.value.handleClose();
    }
  }
}

async function handleCommand(co: string) {
  switch (co) {
    case "a":
      router.push({ name: "题库", query: { tabName: "user" } });
      break;
    case "b":
      await asynclogout();
      // 清除团队缓存
      localStorage.removeItem("my-team");
      router.push({ name: "登录" });
      await store.dispatch("actiononline");
      break;
    case "c":
      router.push({
        name: "贡献测试点查询",
      });
      break;
    case "u":
      router.push({ name: "用户" });
      break;
    case "d":
      dialogVisible.value = true;
      name.value = "修改个人信息";
      break;
    default:
  }
}

function shoudialogVisible(name1: string) {
  dialogVisible.value = true;
  if (name1) {
    name.value = name1;
  }
}

async function login() {
  const { phonenum, password, teamid } = form;
  try {
    await asynclogin({ ID: phonenum, password, teamid });
    location.reload();
    await store.dispatch("actiononline");
    dialogVisible.value = false;
    ElMessage.success("登录成功");
  } catch (e: any) {
    ElMessage.error(String(e));
  }
}

async function registerSendCode() {
  const { phonenum } = register;
  if (time.value !== 60) return;
  if (isPhonenum.test(phonenum)) {
    await asyncgetregistphoneVerificationCode(phonenum);
    const x = setInterval(() => {
      time.value = time.value - 1;
      if (time.value == 0) {
        clearInterval(x);
        time.value = 60;
      }
    }, 1000);
  }
}
async function forgetSendCode() {
  const { phonenum } = forget;
  if (time2.value !== 60) return;
  if (isPhonenum.test(phonenum)) {
    await asyncgetregistphoneVerificationCode(phonenum);
    const x = setInterval(() => {
      time2.value = time2.value - 1;
      if (time2.value == 0) {
        clearInterval(x);
        time2.value = 60;
      }
    }, 1000);
  }
}
async function changepassword() {
  try {
    await asyncchangepassword(userInfoForm);
    ElMessage.success("修改密码成功");
    dialogVisible.value = false;
  } catch (e: any) {
    ElMessage.error(e);
  }
}
async function changeUser() {
  try {
    await asyncchangeuser(userInfoForm);
    ElMessage.success("修改个人信息成功");
    await store.dispatch("actiononline");
    dialogVisible.value = false;
  } catch (e: any) {
    ElMessage.error(e);
  }
}

const forgetref = ref<typeof ElForm>();
async function forgetpassword() {
  forgetref.value?.validate(async (valid: any) => {
    if (valid) {
      try {
        await asyncresetpassword(forget);
        ElMessage.success("修改个人信息成功");
        await asynclogin({
          ID: forget.phonenum,
          password: forget.password,
        });
        await store.dispatch("actiononline");
        dialogVisible.value = false;
      } catch (e: any) {
        ElMessage.error(e);
      }
    } else {
      return false;
    }
  });
}

function handleCommand2(co: string) {
  dropdownref.value?.handleClose();
  switch (co) {
    case "a":
      if (!getuser.value) {
        shoudialogVisible("登录");
      } else {
        if (
          getteam.value.filter((v) => v.userid === getuser.value?.ID).length > 4
        ) {
          ElMessage.warning("创建团队数上限为5");
          return;
        }

        ElMessageBox.prompt("请输入名称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          if (value) {
            asynccreateteam({ name: value })
              .then((e) => {
                if (e.ID) {
                  router.push({
                    name: "团队",
                    params: {
                      ID: e.ID,
                    },
                  });
                }
              })
              .catch((e) => {
                ElMessage.error(e);
              });
          }
        });
      }
      break;
    case "b":
      dialogVisibleteam.value = true;
      break;
    default:
      return;
  }
}
const ruleFormteam = ref<typeof ElForm>();


const registerref = ref();

async function registersubmit() {
  registerref.value.validate(async (valid: any) => {
    if (valid) {
      try {
        await asyncuserregist(register);
        ElMessage.success("注册成功");
        await store.dispatch("actiononline");
        dialogVisible.value = false;
        location.reload();
      } catch (e: any) {
        ElMessage.error(e);
      }
    } else {
      return false;
    }
  });
}

// 监听团队切换
watch(
  () => getuser.value,
  (e) => {
    if (e) {
      userInfoForm.name = e.name ? e.name : "";
      getPermissionsCfg();
    }
  }
);
// 监听用户切换
watch(
  () => getuser.value?.ID,
  (e) => {
    if (e) {
      init();
    }
  }
);

defineExpose({
  shoudialogVisible,
  handleCommand,
  handleCommand2,
});
</script>

<style scoped>
#nav {
  background-color: #fff;
  left: 0px;
  top: 0px;
  margin: 0 auto;
  width: 100%;
  z-index: 10;
  box-shadow: 0px 3px 6px rgba(114, 114, 114, 0.16);
  padding: 0 5px;
}

/*ojSass 头像 */
.hov:hover {
  color: #3b5fdd;
}

/* ojSass */
#nav .active {
  color: #3b5fdd;
  border-bottom: 4px solid #3b5fdd;
}

/* ojSass */
.nav-item {
  border-bottom: 4px solid transparent;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font-family: PingFangSC-Semibold;
  text-align: center;
  font-size: 16px;
  padding: 0 10px;
  cursor: pointer;

  line-height: 64px;
  height: 64px;
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
  position: relative;
}

.nav-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item.padding12 {
  padding: 0 8px;
}

#nav .navbar {
  padding: 0;
  height: 64px;
  line-height: 64px;
}

#nav .navbar-brand {
  min-width: 180px;
  height: 64px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  margin-right: 20px;
}

#nav .navbar-brand img {
  margin: 0 auto;
  display: block;
}

#nav .img {
  height: 1.1rem;
  width: 1.1rem;
  vertical-align: baseline;
}

#nav .icon {
  font-size: 1.25rem;
}

/*ojSass nav-tabs */
.nav-item:hover {
  color: #3b5fdd;
}

/*ojSass 云课堂 */
.nav-item:hover a {
  color: #3b5fdd !important;
}

.router-link-exact-active {
  color: var(--color-cheng);
}

.el-icon-bell {
  font-size: 24px;
}

.headimages {
  height: 80px;
  line-height: 80px;
}

.headimages-item {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.imageright {
  margin-right: -35px;
}

.imageleft {
  margin-left: -35px;
}

.imagecenter {
  z-index: 20;
}

.avater-name {
  width: max-content;
  display: inline-block;
  color: rgba(51, 51, 51, 1);
  margin-left: 10px;
  font-size: 14px;
}

.headimages img {
  width: 50px;
  height: 50px;
}

.avater-h {
  line-height: 64px;
}

.avater-h:focus-visible {
  outline: none !important;
}

.head-left {
  margin-right: -25px;
}

.head-center {
  z-index: 10;
}

.head-right {
  margin-left: -25px;
}

.headimages img:hover {
  width: 75px;
  height: 75px;
  z-index: 10;
}

.pu {
  cursor: pointer;
  color: var(--color-909399);

  line-height: 15px;
  margin-bottom: 20px;
}

.image {
  width: 75px;
  height: 75px;
}

.text-login {
  margin-bottom: 3px;
  margin-top: 3px;
}

.text-login h4 {
  text-align: center;
  font-size: 28px;
  font-weight: 650;
  color: var(--color-606266);
}

.text-body .col-6 {
  min-height: 400px;
}

.fix-form {
  padding: 0 50px;
}

.form-item-title {
  text-align: left;
  font-weight: bolder;
  margin: 20px 0;
  font-size: 16px;
}

.icon-text {
  display: inline-flex;
  align-items: center;
}

.fix-info-button {
  width: 50%;
  margin: 0 25%;
  height: 40px;
  font-size: 16px;
  border-radius: 4px !important;
  color: #fff;
}

.fix-info-button:hover {
  color: #fff;
  border-color: transparent !important;
}

.btn {
  height: 40px;
  font-size: 18px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

.btn-login {
  background: var(--color-43);
  border-radius: 2px !important;
  color: #fff;
}

.btn-login:hover {
  color: #fff;
  border-color: transparent !important;
}

.text-item {
  margin-bottom: 28px;
}

.p-1 {
  font-size: 14px;
}

.nav-item-name {
  line-height: 64px;
}

.headimage {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  cursor: pointer;
}

.d-block {
  width: 100%;
}

/*  */
#nav .navbar-collapse {
  background-color: #fff;
  width: auto;
  z-index: 99;
  transition: width 0.3s ease-in-out;
}

.goToMgmt {
  font-size: 14px;
  font-weight: bolder;
  width: 100%;
  display: inline-flex;
  align-items: center;
}

.goToMgmt:hover {
  /* background-color: var(--color-f5); */
  color: var(--color-cheng);
}

/* 移动端 菜单垂直堆叠 */
@media (max-width: 992px) {
  #nav {
    position: relative;
  }

  #nav .navbar-collapse {
    position: absolute;
    top: 64px;
    right: 0;
    width: 200px;
    background: white;
    z-index: 1000;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    transform: translateX(0);
  }

  .nav-item {
    width: 100%;
    height: 50px !important;
    line-height: 50px !important;
    border-bottom: 1px solid #eee;
    justify-content: flex-start;
  }

  /* 新增菜单宽度控制 */
  .navbar-collapse:not(.show) {
    display: none;
  }

  .navbar-collapse.show {
    display: block;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    right: auto;
  }
}
</style>
